<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS问题测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            background: white;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-title {
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        .test-result {
            margin: 10px 0;
            padding: 15px;
            border-radius: 5px;
            font-family: monospace;
            white-space: pre-wrap;
        }
        .success { background-color: #d4edda; border-left: 4px solid #28a745; }
        .error { background-color: #f8d7da; border-left: 4px solid #dc3545; }
        .warning { background-color: #fff3cd; border-left: 4px solid #ffc107; }
        .info { background-color: #d1ecf1; border-left: 4px solid #17a2b8; }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        button:hover { background-color: #0056b3; }
        button:disabled { background-color: #6c757d; cursor: not-allowed; }
        .url-list {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .url-item {
            margin: 5px 0;
            padding: 5px;
            background: white;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>🔧 CORS问题诊断和解决方案测试</h1>
    
    <div class="test-container">
        <h2 class="test-title">问题分析</h2>
        <div class="test-result info">
从Chrome DevTools截图可以看出：
1. 红色X标记 - 请求被浏览器阻止
2. "Provisional headers are shown" - CORS预检失败
3. 没有状态码 - 请求未到达服务器

这是典型的CORS（跨域资源共享）问题。
        </div>
    </div>

    <div class="test-container">
        <h2 class="test-title">解决方案测试</h2>
        
        <div class="url-list">
            <h3>测试URL列表：</h3>
            <div class="url-item">1. 原始API: http://149.88.80.204:8000/api/v1/company-info</div>
            <div class="url-item">2. CORS代理1: https://cors-anywhere.herokuapp.com/...</div>
            <div class="url-item">3. CORS代理2: https://api.allorigins.win/raw?url=...</div>
            <div class="url-item">4. JSONP方法: 添加callback参数</div>
        </div>

        <button onclick="testAllMethods()">🚀 开始全面测试</button>
        <button onclick="clearResults()">🗑️ 清除结果</button>
    </div>

    <div class="test-container">
        <h2 class="test-title">测试结果</h2>
        <div id="test-results"></div>
    </div>

    <div class="test-container">
        <h2 class="test-title">推荐解决方案</h2>
        <div class="test-result info">
根据测试结果，推荐以下解决方案：

1. 如果JSONP成功 - 使用JSONP方法
2. 如果CORS代理成功 - 使用代理服务器
3. 如果都失败 - 使用模拟数据或联系API提供方配置CORS

注意：某些CORS代理服务可能需要激活或有限制。
        </div>
    </div>

    <script>
        const API_URL = 'http://149.88.80.204:8000/api/v1/company-info';
        let testCount = 0;

        function showResult(message, type = 'info') {
            const resultsDiv = document.getElementById('test-results');
            const resultDiv = document.createElement('div');
            resultDiv.className = `test-result ${type}`;
            resultDiv.textContent = message;
            resultsDiv.appendChild(resultDiv);
            resultsDiv.scrollTop = resultsDiv.scrollHeight;
        }

        function clearResults() {
            document.getElementById('test-results').innerHTML = '';
            testCount = 0;
        }

        function testAllMethods() {
            clearResults();
            showResult('🚀 开始全面CORS测试...\n', 'info');
            
            // 测试1: 原始AJAX
            testOriginalAJAX();
            
            // 测试2: CORS代理1
            setTimeout(() => testCORSProxy1(), 1000);
            
            // 测试3: CORS代理2
            setTimeout(() => testCORSProxy2(), 2000);
            
            // 测试4: JSONP
            setTimeout(() => testJSONP(), 3000);
        }

        function testOriginalAJAX() {
            testCount++;
            showResult(`测试 ${testCount}: 原始AJAX请求\nURL: ${API_URL}\n`, 'info');
            
            const xhr = new XMLHttpRequest();
            xhr.open('GET', API_URL, true);
            xhr.timeout = 5000;
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.setRequestHeader('Accept', 'application/json');
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    showResult(`✅ 原始AJAX成功！\n状态: ${xhr.status}\n响应: ${xhr.responseText.substring(0, 200)}...\n`, 'success');
                } else {
                    showResult(`❌ 原始AJAX失败\n状态: ${xhr.status}\n错误: ${xhr.statusText}\n`, 'error');
                }
            };
            
            xhr.onerror = function() {
                showResult(`❌ 原始AJAX网络错误\n可能原因: CORS限制、网络问题\n`, 'error');
            };
            
            xhr.ontimeout = function() {
                showResult(`❌ 原始AJAX超时\n`, 'error');
            };
            
            try {
                xhr.send();
            } catch (error) {
                showResult(`❌ 原始AJAX发送失败: ${error.message}\n`, 'error');
            }
        }

        function testCORSProxy1() {
            testCount++;
            const proxyUrl = 'https://cors-anywhere.herokuapp.com/' + API_URL;
            showResult(`测试 ${testCount}: CORS代理1 (cors-anywhere)\nURL: ${proxyUrl}\n`, 'info');
            
            const xhr = new XMLHttpRequest();
            xhr.open('GET', proxyUrl, true);
            xhr.timeout = 8000;
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    showResult(`✅ CORS代理1成功！\n状态: ${xhr.status}\n响应: ${xhr.responseText.substring(0, 200)}...\n`, 'success');
                } else {
                    showResult(`❌ CORS代理1失败\n状态: ${xhr.status}\n错误: ${xhr.statusText}\n`, 'error');
                }
            };
            
            xhr.onerror = function() {
                showResult(`❌ CORS代理1网络错误\n可能原因: 代理服务不可用、需要激活\n`, 'error');
            };
            
            xhr.ontimeout = function() {
                showResult(`❌ CORS代理1超时\n`, 'error');
            };
            
            try {
                xhr.send();
            } catch (error) {
                showResult(`❌ CORS代理1发送失败: ${error.message}\n`, 'error');
            }
        }

        function testCORSProxy2() {
            testCount++;
            const proxyUrl = 'https://api.allorigins.win/raw?url=' + encodeURIComponent(API_URL);
            showResult(`测试 ${testCount}: CORS代理2 (allorigins)\nURL: ${proxyUrl}\n`, 'info');
            
            const xhr = new XMLHttpRequest();
            xhr.open('GET', proxyUrl, true);
            xhr.timeout = 8000;
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    showResult(`✅ CORS代理2成功！\n状态: ${xhr.status}\n响应: ${xhr.responseText.substring(0, 200)}...\n`, 'success');
                } else {
                    showResult(`❌ CORS代理2失败\n状态: ${xhr.status}\n错误: ${xhr.statusText}\n`, 'error');
                }
            };
            
            xhr.onerror = function() {
                showResult(`❌ CORS代理2网络错误\n`, 'error');
            };
            
            xhr.ontimeout = function() {
                showResult(`❌ CORS代理2超时\n`, 'error');
            };
            
            try {
                xhr.send();
            } catch (error) {
                showResult(`❌ CORS代理2发送失败: ${error.message}\n`, 'error');
            }
        }

        function testJSONP() {
            testCount++;
            showResult(`测试 ${testCount}: JSONP方法\nURL: ${API_URL}?callback=testCallback\n`, 'info');
            
            const callbackName = 'jsonpCallback' + Date.now();
            window[callbackName] = function(data) {
                showResult(`✅ JSONP成功！\n响应: ${JSON.stringify(data).substring(0, 200)}...\n`, 'success');
                cleanup();
            };
            
            const script = document.createElement('script');
            script.src = API_URL + '?callback=' + callbackName;
            script.onerror = function() {
                showResult(`❌ JSONP失败\n可能原因: API不支持JSONP、网络错误\n`, 'error');
                cleanup();
            };
            
            // 超时处理
            setTimeout(() => {
                if (window[callbackName]) {
                    showResult(`❌ JSONP超时\n`, 'error');
                    cleanup();
                }
            }, 5000);
            
            function cleanup() {
                delete window[callbackName];
                if (script.parentNode) {
                    script.parentNode.removeChild(script);
                }
            }
            
            document.head.appendChild(script);
        }

        // 页面加载时显示说明
        window.onload = function() {
            showResult('CORS测试页面已加载\n点击"开始全面测试"按钮开始测试\n', 'info');
        };
    </script>
</body>
</html>
